<template>
  <div class="table">
    <div class="top">
      <div class="item">
        <div class="label">
          <span>*</span>
          <span>作业码头：</span>
        </div>
        <el-select v-model="form.termCode"
          @change="$emit('setTerm',form.termCode)"
          :disabled="seeFlag"
          placeholder="搜索查询更多"
          clearable
          filterable
          size="small"
          style="width:200px">
          <el-option  :label="item.cnName" :value="item.termCode"  v-for="(item,index) in dataList.termList" :key="index"></el-option>
        </el-select>
      </div>
      <div class="item">
        <div class="label">
          <span>*</span>
          <span>箱号：</span>
        </div>
        <el-input v-model="form.cntrNo"
          :disabled="seeFlag"
          placeholder="请输入"
          size="small"
          @input="selectInput"
          style="width:200px">
        </el-input>
      </div>
      <div class="item">
        <el-button type="primary"
                   class="search"
                   v-if="!seeFlag"
                   @click="getDate">查询</el-button>
        <el-button type="info" size="small"
                   @click="clearBoxTable">清空</el-button>
      </div>
    </div>
    <div class="table">
      <el-table :data="tableData"
                @selection-change="handleSelectionchangeS"
                :header-cell-style="{ background: '#EEF1F5'}"
                style="width: 100%">
        <el-table-column type="selection"
                         :selectable="selectable"
                         width="55">
        </el-table-column>
        <el-table-column prop="cntrno"
                         label="箱号"
                         width="180">
        </el-table-column>
        <el-table-column prop="ctypecd"
                         label="船公司箱型"
                         width="180">
        </el-table-column>
        <el-table-column prop="cstCopercd"
                         label="持箱人"
                         min-width="220">
            <template slot-scope="scope">
              {{ (scope.row.cstCopercd || '') + '/' + (scope.row.cstCoperName || '') }}
            </template>
        </el-table-column>
        <el-table-column prop="internalfg"
                         label="贸易类型"
                         width="180">
            <template slot-scope="scope">
              {{ scope.row.internalfg == 'Y' ? '内贸' :scope.row.internalfg == 'N' ? '外贸' : (scope.row.internalfg || '') }}
            </template>
        </el-table-column>
        <el-table-column prop="dirtycd"
                         label="坏/污"
                         width="180">
        </el-table-column>
        <el-table-column prop="attachOperation"
                         label="附加操作"
                         width="180">
        </el-table-column>
      </el-table>
    </div>

  </div>
</template>

<script>
export default {
  name: 'emptyTableNum',
  components: {},
  data() {
    return {
      dataList: {
        termList: [],
      },
      form: {
        planTag:'PERF_WC',
        termCode: '',
        cntrNo:'',
      },
      oriForm: {
        planTag:'PERF_WC'
      },
      tableData: [],
      selection:[],
    }
  },
  props:{
    setTag:'',
    seeFlag:{
      default:false
    }
  },
  watch:{
    setTag(){
      this.form.planTag=this.setTag
      this.oriForm.planTag=this.setTag
    }
  },
  created(){
    this.term()
  },
  methods: {
    // 筛选el-input 只能输入数字字母和分号
    selectInput(event) {
      const input = event;
      // 使用正则表达式过滤输入，只允许数字、字母和分号
      const filteredInput = input.replace(/[^a-zA-Z0-9;]/g, '');
      this.form.cntrNo = filteredInput;
    },
    term(){
      this.$api.term().then(res => {
						this.dataList.termList = res.data.data
					})
    },
    selectable(){
      return !this.seeFlag
    },
    handleSelectionchangeS(val) {
      this.selection = val;
      //this.$refs.table.toggleRowSelection(val, true);
    },
    clearBoxTable(){
        this.tableData=[]
    },
    getDate() {
        this.tableData=[]
      if(!this.form.termCode){
        this.$message.error('请选择码头')
        return
      }
      if(!this.form.cntrNo){
        this.$message.error('请输入箱号')
        return
      }
      this.$emit('set',this.form.termCode)

      this.tableData=[]
      const cntrNos = this.form.cntrNo.split(';').map(item => item.trim()).filter(item => item);
      const promises = cntrNos.map(cntrNo => {
          const formData = { ...this.form, cntrNo };
          return this.$api.tosGetContainer(formData).then(res => {
              let setBoxs = new Set();
              for (let b of this.tableData) {
                  setBoxs.add(b.cntrno);
              }
              for (let e of res.data) {
                  if (!setBoxs.has(e.cntrno)) {
                      this.tableData.push(e);
                      setBoxs.add(e.cntrno);
                  }
              }
          }).catch(err => {
              console.log("查无数据:", err);
          });
      });
      Promise.all(promises).then(() => {
          console.log("所有请求已完成");
      }).catch(err => {
          console.log("发生错误:", err);
      });
      // this.$api.tosGetContainer(this.form).then(res=>{
      //       let setBoxs = new Set();
      //       for(let b of this.tableData){
      //           setBoxs.add(b.cntrno)
      //       }
      //       for(let e of res.data){
      //           if(!setBoxs.has(e.cntrno)){
      //               this.tableData.push(e)
      //               setBoxs.add(e.cntrno)
      //           }
      //       }
      //   }).catch(res=>{
      //       console.log("查无数据:"+res.data)
      //       // this.tableData=[]
      // })
    },
  },

  computed: {},

  mounted() {},
}
</script>
<style lang='scss' scoped>
.table {
  background: #fff;
  .top {
    padding: 20px;
    border-bottom: 1px solid #d7d7d7;
    box-sizing: border-box;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #000000;
    line-height: 16px;
    display: flex;
    .item {
      display: flex;
      align-items: center;
      margin-right: 20px;
      .label {
        margin-right: 5px;
        span:first-child {
          color: #ff3838;
        }
      }
    }
    .search {
      background: #0f47b8;
      height: 30px;
      padding: 5px 10px;
    }
  }
  .table {
    padding: 20px;
  }
}
</style>